<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="220px">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button
            type="success"
            plain
            size="small"
            icon="fa fa-mail-forward"
            @click="returnList"
            >返回</el-button
          >
        </div>
        <el-row>
          <el-form-item label="小区名称:">
            <span>{{ dataInfo.villageName }}</span>
          </el-form-item>
          <el-form-item label="小区地址:">
            <span
              >{{ dataInfo.provinceName }}{{ dataInfo.cityName
              }}{{ dataInfo.areaName }}{{ dataInfo.streetName
              }}{{ dataInfo.address }}</span
            >
          </el-form-item>
          <el-form-item label="开发员:">
            <span>{{ developerName }}</span>
          </el-form-item>
          <el-form-item label="推广员:">
            <span>{{ promoterName }}</span>
          </el-form-item>
          <el-form-item label="维护员:">
            <span>{{ keeperName }}</span>
          </el-form-item>
          <el-form-item label="安保呼叫器编号:">
            <span>{{ dataInfo.beeperCode }}</span>
          </el-form-item>
          <el-form-item label="物业名称:">
            <span>{{ dataInfo.pmcName }}</span>
          </el-form-item>
          <el-form-item label="物业电话:">
            <span>{{ dataInfo.pmcPhone }}</span>
          </el-form-item>
          <el-form-item label="物业备用电话:">
            <span>{{ dataInfo.pmcPhoneTwo }}</span>
          </el-form-item>
          <el-form-item label="物业收费周期:">
            <span>{{ dataInfo.feePeriodName }}</span>
          </el-form-item>
          <el-form-item label="开锁人名称:">
            <span>{{ dataInfo.unlockName }}</span>
          </el-form-item>
          <el-form-item label="开锁电话:">
            <span>{{ dataInfo.unlockPhone }}</span>
          </el-form-item>
          <el-form-item label="开锁备用电话:">
            <span>{{ dataInfo.unlockSparePhone }}</span>
          </el-form-item>
          <el-form-item label="报警是否联系紧急联系人:">
            <span>{{ dataInfo.fastLinkFlag === 1?'是':'否' }}</span>
          </el-form-item>
          <el-form-item label="120行车路线:">
            <span>{{ dataInfo.sosRoute }}</span>
          </el-form-item>
          <el-form-item label="120电话:">
            <span>{{ dataInfo.sosPhone }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
          <el-form-item label="小区介绍:">
            <span>{{ dataInfo.introduce }}</span>
          </el-form-item>
          <el-form-item label="小区二维码" v-if="dataInfo.linkWxAppUrl">
            <el-image
              class="qrcode"
              @click.native="
                downloadByBlob(dataInfo.linkWxAppUrl, '小区二维码')
              "
              title="点击可下载"
              v-if="dataInfo.linkWxAppUrl"
              :src="dataInfo.linkWxAppUrl"
              alt=""
            ></el-image>
            <!-- :preview-src-list="[dataInfo.linkWxAppUrl]" -->
          </el-form-item>
          <el-form-item label="小区二维码" v-if="!dataInfo.linkWxAppUrl">
            <span style="color: red">未 生 成</span>
          </el-form-item>
          <el-form-item label="小区地图图片:" style="display: block;width: 100%;">
            <el-image
              v-if="dataInfo.villageImage"
              style="width: 200px; height: 200px"
              :src="dataInfo.villageImage || ''"
              fit="contain"
              :preview-src-list="[dataInfo.villageImage]"
            >
            </el-image>
          </el-form-item>
          <el-form-item label="消防通道入口图:">
            <el-image
              v-if="dataInfo.fireEnterPicture"
              style="width: 200px; height: 200px"
              :src="dataInfo.fireEnterPicture || ''"
              fit="contain"
              :preview-src-list="[dataInfo.fireEnterPicture]"
            >
            </el-image>
          </el-form-item>
          <el-form-item label="消防通道入口地址/经度/纬度：">
            <div style="min-height:220px">
             {{dataInfo.fireEnterAddress}} / {{dataInfo.fireEnterLng}} / {{dataInfo.fireEnterLat}}
            </div>
          </el-form-item>

          <el-form-item label="急救通道入口图:">
            <el-image
              v-if="dataInfo.aidEnterPicture"
              style="width: 200px; height: 200px"
              :src="dataInfo.aidEnterPicture || ''"
              fit="contain"
              :preview-src-list="[dataInfo.aidEnterPicture]"
            >
            </el-image>
          </el-form-item>
          <el-form-item label="急救通道入口地址/经度/纬度：">
            <div style="min-height:220px">
              {{dataInfo.aidEnterAddress}} / {{dataInfo.aidEnterLng }} / {{dataInfo.aidEnterLat }}

            </div>
          </el-form-item>

          <el-form-item label="110通道入口图:">
            <el-image
              v-if="dataInfo.policeEnterPicture"
              style="width: 200px; height: 200px"
              :src="dataInfo.policeEnterPicture || ''"
              fit="contain"
              :preview-src-list="[dataInfo.policeEnterPicture]"
            >
            </el-image>
          </el-form-item>
          <el-form-item label="110通道入口地址/经度/纬度：">
            <div style="min-height:220px">
             {{dataInfo.policeEnterAddress}} / {{dataInfo.policeEnterLng}} / {{dataInfo.policeEnterLat}}
            </div>
          </el-form-item>
          <el-form-item label="小区楼宇结构图:">
            <div class="img-video">
              <template title="点击可预览" v-for="item in dataInfo.buildStructImgs">
                <el-image fit="cover" v-if="item.type === 1" :src="item.url" alt="" :preview-src-list="images"></el-image>
                <video v-else-if="item.type === 2" :src="item.url" controls>
                  <h2>我们很抱歉，您的浏览器<strong>不支持video标签</strong></h2>
                  <a href="https://www.google.cn/chrome/">点击这里下载浏览器</a>
                </video>
              </template>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import VillageApi from "@/api/address/village";
import LoginApi from "@/api/system/login";
export default {
  data() {
    return {
      dataInfo: {},
      roleList: [],
    };
  },
  computed: {
    // 根据id获取开发员
    developerName() {
      if (this.dataInfo.developerId && this.roleList.length > 0) {
        return this.roleList.find(
          (item) => item.id == this.dataInfo.developerId
        ).name;
      }
    },

    images() {
      if (this.dataInfo.buildStructImgs) {
        return this.dataInfo.buildStructImgs.filter(item => item.type == 1).map(item => item.url)
      } else {
        return []
      }
    },

    // 根据id获取推广员
    promoterName() {
      if (this.dataInfo.promoterId && this.roleList.length > 0) {
        // this.dataInfo.promoterId是一个用逗号连接的字符串，里面都是id，要化为数组然后把对应的this.roleList里面的每一项获取到
        // 之后获取名字然后又连接成字符串
        return this.roleList
          .filter((item) =>
            this.dataInfo.promoterId
              .split(",")
              .some((item2) => item2 == item.id)
          )
          .map((item3) => item3.name)
          .join(",");
      }
    },
    // 根据id获取维护员
    keeperName() {
      if (this.dataInfo.keeperId && this.roleList.length > 0) {
        return this.roleList.find((item) => item.id == this.dataInfo.keeperId)
          .name;
      }
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      VillageApi.getVillageInfo({ id: this.$route.query.id }).then((res) => {
        this.dataInfo = res.data;
        this.dataInfo.buildStructImgs = this.dataInfo.buildStructImgs.split(",")
          .map(url => ({ url, type: 1 }))
        // 获取推广员与维护员列表，两个取同一个列表
        LoginApi.roleInfoList().then((res) => {
          this.roleList = res.data;
        });
      });
    },
    download(href, name) {
      let eleLink = document.createElement("a");
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    },
    downloadByBlob(url, name) {
      let image = new Image();
      image.setAttribute("crossOrigin", "anonymous");
      image.src = url;
      image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob);
          this.download(url, name);
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    },
    returnList() {
      this.$store.dispatch("delView", this.$route);
      this.$router.push({ path: "/address/villageManagement" });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
.img-video {
  width: 600px;
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 150px;
    height: 150px;
    vertical-align: bottom;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }

  video {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }
}
</style>
<style lang="scss">
.qrcode {
  width: 150px;
  cursor: pointer;
}
</style>
